Website Optimization: Speed, Search Engine & Conversion Rate Secrets by Andrew King

Author:Andrew King
Format: mobi
Tags: Web sites - Design, Internet - World Wide Web, Internet programming, Internet, General, Internet marketing, Business, Systems Analysis & Design, Publishing on the Internet, Application Development, World Wide Web, Web sites, Computers, Programming, Web servers, Computing: Professional & Programming, Business - Computer networks, Web Page Design, Business & Economics, Web - Page Design, Marketing +, E-Commerce - Internet Marketing, Web graphics & design, Electronic books, Electronic commerce, Computer Books: Web Programming, E-Commerce, Design, Computer - Internet
ISBN: 9780596515089
Publisher: O'Reilly Media, Inc.
Published: 2008-12-13T20:00:00+00:00

Next, strip down the content to structural markup and build it back up again using

CSS style and positioning. Then test the new layout with different browsers. We recommend using BrowserCam (http://www.browsercam.com) to quickly test your new

CSS layout on different browsers (see Figure 6-11).

Figure 6-11. BrowserCam.com renders web pages on different browsers

CSS page layout

You can use CSS to position your entire layout or to format smaller sections of your

web pages. We often see tables used to format pages when CSS could have been used

more efficiently. You can create multicolumn layouts using CSS floats and margins

applied to divs (http://alistapart.com/topics/code/css/). You can make complex hierarchical menus by using lists controlled by CSS, not lists controlled by JavaScript as is usually the case, as described in More Eric Meyer on CSS. You can create simple rollover effects using CSS, with and without graphics. For examples of CSS rollover

effects and menu conversion, see Chapter 7.

How to Optimize Your Web Page Speed

|

181

Step 8: Replace Inline Style with CSS Rules

Replacing table layout with CSS layout certainly saves you bandwidth and reduces

maintenance headaches. Stripping down your markup to bare structure and replacing any inline style with CSS rules will help fully optimize your HTML. Inline style includes the deprecated font tag, inline style blocks, and nonbreaking

spaces. Inline style such as:

<p style="font-size:12px;color:black;">Hardcoded text here.</p>

<p style="font-size:12px;color:black;">Inline style redux</p>

bulks up your code and makes it harder to make style changes. It is more efficient to

abstract multiple duplicate styles into CSS rules, like so:

<style type="text/css">

p{font-size:12px;color:#000;}

</style></head></body>

<p>Unencumbered text here</p>

<p>Free and easy</p>

Replacing inline style, font tags, and nonbreaking spacing with CSS rules can reduce

your HTML footprint significantly (by 15% to 20% or more), depending on the

amount of embedded style. The key to this type of code cleanup is to plan ahead for

targeting content elements with CSS using the CSS architecture you’ll read about in

Chapter 7.

CSS architecture uses structural HTML markup (p, ul, dt, etc.) and labeled containers (#main, #nav, #footer) that allow simple type and descendant selectors to target noncontiguous content. Once your CSS architecture is in place, targeting similar

content is only a matter of creating targeted CSS rules using selectors to style the

same type of elements and declarations to apply your styles. You’ll learn more about

optimizing your HTML with CSS, as well as shrinking your style sheets, in

Chapter 7.

Step 9: Minimize Initial Display Time

You can improve the perceived speed of your web page by loading something useful

fast.

For example, the Weather Underground home page displays the weather search form

quickly in the top-left corner of the screen (see Figure 6-12). Unlike other weather sites that require different elements to load first, Weather Underground gives priority to the most important part of the page first so that you can find the forecast for your area fast.

You can ensure that your useful content (i.e., content that users can navigate with)

loads quickly by layering your tables or divs.

182

|

Chapter 6: Web Page Optimization

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.